<template>
  <div class="flex space-x-2">
    <button
      @click="switchToEnglish"
      :class="
        currentLang === 'en'
          ? 'bg-primary text-white'
          : 'bg-gray-200 text-gray-800'
      "
      class="px-4 py-2 rounded-md"
    >
      English
    </button>
    <button
      @click="switchToChinese"
      :class="
        currentLang === 'zh'
          ? 'bg-primary text-white'
          : 'bg-gray-200 text-gray-800'
      "
      class="px-4 py-2 rounded-md"
    >
      中文
    </button>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { ref, watchEffect } from 'vue'

// 使用global作用域初始化i18n
const { locale } = useI18n({
  useScope: 'global'
})

// 创建响应式引用以跟踪当前语言
const currentLang = ref(locale.value)

// 使用watchEffect监听locale变化
watchEffect(() => {
  currentLang.value = locale.value
  console.log('Current language:', currentLang.value)
})

// 切换到英文
const switchToEnglish = () => {
  console.log('Switching to English')
  locale.value = 'en'
  localStorage.setItem('language', 'en')
}

// 切换到中文
const switchToChinese = () => {
  console.log('Switching to Chinese')
  locale.value = 'zh'
  localStorage.setItem('language', 'zh')
}
</script>
